@import "src/styles/default/_variables";

@pro-prefix: ~'stdTimeline';

.tagCommon(@size, @bg) {
  display: block;
  border-radius: 50%;
  width: @size;
  height: @size;
  background-color: @bg;
  position: absolute;
}

.@{pro-prefix} {
  font-family: PingFang SC;


  .@{pro-prefix}Item {
    display: flex;
    align-items: flex-start;

    &:not(:last-of-type) {
      height: 62px;

      .@{pro-prefix}ItemTag {
        display: flex;
        justify-content: center;

        &::after {
          content: ' ';
          display: block;
          height: 47px;
          position: absolute;
          top: 18px;
          background-color: #E0E0E0;
          @media (min-resolution: 2dppx) {
            width: 0.5px;
          }
          @media (min-resolution: 3dppx) {
            width: 0.33px;
          }
        }
      }
    }
  }

  .@{pro-prefix}ItemDate {
    font-size: 14px;
    line-height: 22px;
    color: #999999;
    text-align: right;
    min-width: 44px;
    padding-right: 4px;
  }

  .@{pro-prefix}ItemTag {
    width: 16px;
    min-width: 16px;
    height: 22px;
    padding-top: 2px;
    position: relative;

    &.success {
      span {
        .tagCommon(16px, rgba(0, 132, 255, 0.3));
        right: 0;
        top: 2px;

        &::before {
          content: ' ';
          .tagCommon(10px, @primary);
          top: 50%;
          left: 50%;
          margin-top: -5px;
          margin-left: -5px;
        }
      }
    }

    &.pending {
      span {
        .tagCommon(8px, #BBBBBB);
        top: 50%;
        right: 50%;
        margin-top: -4px;
        margin-right: -4px;
      }
    }
  }

  .@{pro-prefix}ItemTitle {
    flex: 1;
    font-size: 14px;
    line-height: 22px;
    padding-left: 8px;
    color: @font-color-base;
  }
}